<template>
  <div class="avue-top">
    <div class="top-bar__left">
      <div class="avue-breadcrumb" :class="[{ 'avue-breadcrumb--active': commonStore.isCollapse }]"
           v-if="commonStore.setting.collapse && !commonStore.isHorizontal">
        <i class="icon-navicon" @click="setCollapse"></i>
      </div>
    </div>
    <div class="top-bar__title">
      <top-menu ref="topMenuRef" v-if="commonStore.setting.menu"></top-menu>
      <top-search class="top-bar__item" v-if="commonStore.setting.search"></top-search>
    </div>
    <div class="top-bar__right">
      <div v-if="commonStore.setting.lock" class="top-bar__item">
        <top-lock></top-lock>
      </div>
      <div v-if="commonStore.setting.theme" class="top-bar__item">
        <top-theme></top-theme>
      </div>
      <div class="top-bar__item">
        <top-lang></top-lang>
      </div>
      <div class="top-bar__item" v-if="commonStore.setting.fullscreen">
        <top-full></top-full>
      </div>
      <div class="top-bar__item" v-if="commonStore.setting.debug">
        <top-logs></top-logs>

      </div>
      <div class="wel__info-title" @click="auth"> auth </div>
      <div class="top-user">
        <img class="top-bar__img" :src="userInfo.avatar">
        <el-dropdown>
          <span class="el-dropdown-link">
            {{ userInfo.username }}
          </span>
          <template v-slot:dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <router-link to="/">{{ $t('navbar.dashboard') }}</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link to="/info/index">{{ $t('navbar.userinfo') }}</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link to="/info/setting">{{ $t('navbar.setting') }}</router-link>
              </el-dropdown-item>
              <el-dropdown-item @click="logout" divided>
                {{ $t('navbar.logOut') }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <top-setting></top-setting>
      </div>
    </div>
  </div>
</template>

<script setup>
import topLock from "./top-lock.vue";
import topMenu from "./top-menu.vue";
import topSearch from "./top-search.vue";
import topTheme from "./top-theme.vue";
import topLogs from "./top-logs.vue";
import topLang from "./top-lang.vue";
import topFull from "./top-full.vue";
import topSetting from "../setting.vue";
import {useCommonStore} from '/src/store/modules/common.js'
import {watch,computed} from "vue"
import {useUserStore} from "../../../store/modules/user.js";
import {useI18n} from "vue-i18n"
import {ElMessageBox } from "element-plus"
import {useRoute, useRouter} from "vue-router"
import {useNavsStore} from "@/store/modules/tags.js";


defineOptions({
  name: "top",
})



const userInfo = computed(() => {
  const userStore = useUserStore();
  return userStore.userInfo;
})
const commonStore = computed(() => {
  const commStore = useCommonStore();
  return commStore
})

watch(commonStore, (val) => {
  console.log("commonStore", commonStore)
})

function setCollapse() {
  // this.$store.emit()
  // this.$store.commit("SET_COLLAPSE");
  const commonStore = useCommonStore();
  commonStore.SET_COLLAPSE();
}

const {t, locale} = useI18n()
const route = useRoute()
const router = useRouter()
function logout() {
  ElMessageBox.confirm(t("logoutTip"), t("tip"), {
    confirmButtonText: t("submitText"),
    cancelButtonText: t("cancelText"),
    type: "warning"
  }).then(() => {
    const userStore = useUserStore()
    userStore.LogOut().then(() => {
      router.push({path: "/login"});
    });
  });
}


const tagWelComputed = computed(() => {
  const navStore = useNavsStore()
  return navStore.tagWel
})

function auth() {
  console.log("auth")
  const userStore = useUserStore()

  console.log("tagWelComputed.value.value",tagWelComputed.value.value)
  userStore.GetCurrentUserInfo().then(() => {
    router.push({path: tagWelComputed.value.value});
  })
}
</script>


<script>


export default {
  components: {
    // topLock,
    // topMenu,
    // topSearch,
    // topTheme,
    // topLogs,
    // topLang,
    // topFull,
    // topSetting
  },

  data() {
    return {};
  },
  filters: {},
  created() {
  },
  computed: {
    // ...mapStores(useCommonStore),


  },
  methods: {}
};
</script>

<style lang="scss" scoped>
</style>